<template>
	<view class="unlock">
		<view class="img">
			<image :src="details.image" mode="aspectFill">
			</image>
			<view v-if="details.is_unlock == 0" class="mask">
				未解锁
			</view>
		</view>
		<view class="content">
			<!-- <view class="title">{{details.title}}</view>
			<view class="user" @click="navigateTo(`/pages/index/space?id=${details.user.id}`)">
				<image :src="details.user.avatar" mode="scaleToFill"></image>
				<text>{{details.user.nickname}}</text>
			</view> -->
			<view class="msg">
				<view class="user" @click="goUser">
					<image :src="details.user.avatar" mode="scaleToFill"></image>
					<text>{{details.user.nickname}}</text>
				</view>
				<view class="desc">
					{{details.desc}}
				</view>
				<view class="category">
					🏷️#{{details.category_id | categoryHandle}}
				</view>
			</view>
			<view class="bottomBor">
				<view class="btn" @click="goUnlock">解锁查看笔记内容</view>
			</view>
		</view>
		<view class="operateBor">
			<view class="item">
				<image v-if="details.is_zan" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/cdz1.png"
					mode="scaleToFill" @click="doFavorite(2)"></image>
				<image v-else src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/cdz2.png"
					mode="scaleToFill" @click="doFavorite(2)"></image>
				<text>{{details.zan_num}}</text>
			</view>
			<view class="item">
				<image v-if="details.is_collect"
					src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/cxx1.png" mode="scaleToFill"
					@click="doFavorite(1)"></image>
				<image v-else src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/cxx2.png"
					mode="scaleToFill" @click="doFavorite(1)"></image>
				<text>{{details.collect_num}}</text>
			</view>
			<view class="item">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/cll.png" mode="scaleToFill">
				</image>
				<text>{{details.browse_num}}</text>
			</view>
			<view class="item" @click="showflower = true">
				<image v-if="true" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerT1.png"
					mode="scaleToFill">
				</image>
				<image v-else src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerF1.png"
					mode="scaleToFill">
				</image>
				<text>{{details.flower_num}}</text>
			</view>
			<view class="item">
				<!-- #ifdef H5 -->
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/cfx.png" mode="scaleToFill"
					@click="share">
				</image>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<button class="btn" open-type="share">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/cfx.png" mode="scaleToFill">
					</image>
				</button>
				<!-- #endif -->
				<!-- <text>268</text> -->
			</view>
		</view>
		<!-- 送礼物弹窗 -->
		<u-popup :show="showflower" mode="center" round="10" :safeAreaInsetBottom="false" @close="closeshowflower">
			<view class="showflower">
				<view class="tis">请设置要赠送的数量</view>
				<u-number-box integer v-model="flower" inputWidth="80"></u-number-box>
				<view class="btns">
					<view class="btn" @click="closeshowflower">取消</view>
					<view class="btn active" @click="sendFlower()">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				details: {
					user: {}
				},
				is_examine: 1,
				showflower: false,
				flower: 1,
				antiShake: false,
				// #ifndef H5
				rewardedVideoAd: null,
				isAdLoaded: false,
				// #endif
			}
		},
		filters: {
			categoryHandle(data) {
				let list = uni.getStorageSync('category')
				if (!data) return
				let res = list.filter(v => {
					return v.id == data
				})
				return res[0].title
			}
		},
		onShow() {
			// #ifdef MP-TOUTIAO
			this.createRewardedVideoAd()
			// #endif
		},
		onLoad(options) {
			this.getConfig()
			if (options.referee_id) {
				uni.setStorageSync("referee_id", options.referee_id)
			}
			// console.log(options);
			this.id = options.id
			this.getWorkInfo()
			// #ifdef MP-WEIXIN
			this.createRewardedVideoAd()
			// #endif
		},
		onUnload() {
			// 页面卸载时销毁广告实例
			// #ifdef MP-TOUTIAO
			// this.destroyRewardedVideoAd()
			// #endif
		},
		methods: {
			destroyRewardedVideoAd() {
				if (this.rewardedVideoAd) {
					this.rewardedVideoAd.destroy();
					this.rewardedVideoAd = null;
					this.isAdLoaded = false
					console.log('激励视频广告实例已销毁');
				}
			},
			goUser(){
				// #ifdef MP-TOUTIAO
				this.destroyRewardedVideoAd()
				// #endif
				this.navigateTo(`/pages/index/space?id=${this.details.user.id}`)
			},
			// 赠送鲜花
			async sendFlower() {
				if (this.antiShake || !this.showflower) return
				this.antiShake = true
				let res = await this.$http("api/work/sendFlower", {
					work_id: this.id, //true	int		作品id
					flower: this.flower, //true	string		赠送鲜花数量
				})
				if (res.code == 200) {
					this.showflower = false
					this.getWorkInfo()
					uni.showToast({
						title: '赠送成功',
						duration: 2000
					})
					this.flower = 1
				}
				this.antiShake = false
			},
			closeshowflower() {
				this.showflower = false
				this.flower = 1
			},
			// 获取系统配置
			async getConfig() {
				let res = await this.$http("api/common/getConfig")
				// console.log(res);
				if (res.code == 200) {
					if (getApp().globalData.platform == "mp-weixin" && res.result.is_examine == 1) {
						this.is_examine = 1
					} else {
						this.is_examine = 0
					}
					uni.setStorageSync("is_examine", this.is_examine)
				}
			},
			createRewardedVideoAd() {
				// 创建激励视频广告实例
				// #ifdef MP-TOUTIAO
				this.rewardedVideoAd = uni.createRewardedVideoAd({
					adUnitId: 'oxvvzktysai1qc37hc'
				});
				// #endif
				// #ifdef MP-WEIXIN
				this.rewardedVideoAd = uni.createRewardedVideoAd({
					adUnitId: 'adunit-fd593fffc9fb34fc'
				});
				// #endif

				// 监听广告加载事件
				this.rewardedVideoAd.onLoad(() => {
					this.isAdLoaded = true;
					console.log('激励视频广告加载成功');
				});

				// 监听广告错误事件
				this.rewardedVideoAd.onError(err => {
					console.error('激励视频广告加载失败', err);
				});

				// 监听广告关闭事件
				this.rewardedVideoAd.onClose(res => {
					if (res && res.isEnded) {
						this.adReport()
						uni.showToast({
							title: "正在解锁笔记",
							icon: 'none',
							duration: 2000
						})
						// #ifdef MP-TOUTIAO
						this.destroyRewardedVideoAd()
						// #endif
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/index/content?id=${this.id}`
							});
						}, 2000);
					} else {
						console.log('用户未完整观看激励视频广告');
						uni.showToast({
							title: "观看视频中断",
							icon: 'none'
						})
					}
					// this.isAdLoaded = false;
				});
			},
			showRewardedVideoAd() {
				// if (this.isAdLoaded) {
				// 	this.rewardedVideoAd.show().catch(err => {
				// 		console.error('激励视频广告展示失败', err);
				// 		// 如果广告未加载成功，可以重新加载
				// 		this.rewardedVideoAd.load();
				// 	});
				// } else {
				// 	console.log('激励视频广告未加载完成');
				// }
				this.rewardedVideoAd.show().catch(err => {
					console.error('激励视频广告展示失败', err);
					// 如果广告未加载成功，可以重新加载
					this.rewardedVideoAd.load();
				});
				uni.hideLoading();
			},
			share() {
				if (getApp().globalData.platform == `web`) {
					// console.log(window.location);
					let userInfo = uni.getStorageSync("user");
					uni.setClipboardData({
						data: `${window.location.href}&referee_id=${userInfo.id}`,
						showToast: false,
						success: () => {
							uni.showToast({
								title: '已复制邀请链接，可发送至邀请人加入',
								duration: 2000
							})
						},
						fail: (err) => {
							console.log(err);
						}
					});
				}
			},
			//收藏/取消收藏/点赞/取消点赞
			async doFavorite(work_type) {
				if (work_type == 1) {
					this.details.is_collect = this.details.is_collect == 1 ? 0 : 1
				} else if (work_type == 2) {
					this.details.is_zan = this.details.is_zan == 1 ? 0 : 1
				}
				let res = await this.$http("api/common/doFavorite", {
					type: 1, //true	int		1作品2用户
					work_type, //false	int		默认可以传0,type等于1需要传,作品操作类型 1收藏 2点赞
					tbl_id: this.id, //true	int		作品id或用户id 取消收藏多个id用,拼接
				})
				this.getWorkInfo()
			},
			// 解锁
			goUnlock() {
				if (this.is_examine) {
					uni.showToast({
						title: "正在解锁笔记",
						icon: 'none',
						duration: 2000
					})
					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/index/content?id=${this.id}`
						});
					}, 2000);
					return
				}
				// #ifndef MP-TOUTIAO
				if (getApp().globalData.platform == `web`) {
					uni.redirectTo({
						url: `/pages/index/content?id=${this.id}`
					});
					return
				}
				// #endif
				if (this.details.is_unlock) {
					// #ifdef MP-TOUTIAO
					this.destroyRewardedVideoAd()
					// #endif
					// 已解锁
					uni.showToast({
						title: "该账号已解锁笔记",
						icon: 'none'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/index/content?id=${this.id}`
						});
					}, 2000);
				} else {
					// 未解锁
					uni.showModal({
						title: '提示',
						content: '看完广告即可解锁笔记',
						success: (res) => {
							if (res.confirm) {
								uni.showLoading({
									title: '加载中'
								});
								this.showRewardedVideoAd()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//作品详情
			async getWorkInfo() {
				let res = await this.$http("api/work/getWorkInfo", {
					id: this.id
				}, "GET")
				// console.log(res);
				this.details = res.result
				uni.setNavigationBarTitle({
					title: res.result.title
				});
			},
			// 广告上报
			async adReport() {
				let res = await this.$http("api/work/adReport", {
					id: this.id,
					// #ifdef MP-TOUTIAO
					type: 1,
					// #endif
					// #ifdef MP-WEIXIN
					type: 2,
					// #endif
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.unlock {
		.img {
			position: relative;
			overflow: hidden;
			background-color: #FFFFFF;

			image {
				display: block;
				width: 100%;
				height: 1084rpx;
			}

			.mask {
				position: absolute;
				/* 绝对定位或固定定位，根据需求 */
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 9;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.content {
			padding: 32rpx 32rpx 100rpx;
			background-color: #fff;

			// .title {
			// 	font-weight: bold;
			// 	font-size: 32rpx;
			// 	color: #333333;
			// 	letter-spacing: 2rpx;
			// }

			// .user {
			// 	display: flex;
			// 	align-items: center;
			// 	padding-top: 24rpx;

			// 	image {
			// 		width: 60rpx;
			// 		height: 60rpx;
			// 		border-radius: 50%;
			// 	}

			// 	text {
			// 		font-weight: 500;
			// 		font-size: 26rpx;
			// 		color: #000000;
			// 		padding-left: 12rpx;
			// 	}
			// }

			.msg {
				// padding: 0 32rpx;
				background-color: #fff;

				.user {
					display: flex;
					align-items: center;
					// justify-content: flex-end;
					padding: 24rpx 0;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					text {
						font-weight: 500;
						font-size: 26rpx;
						color: #000000;
						padding-left: 12rpx;
					}
				}

				.desc {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 42rpx;
					letter-spacing: 2rpx;
				}

				.category {
					font-weight: bold;
					font-size: 28rpx;
					color: #FF504A;
					letter-spacing: 2rpx;
					padding: 24rpx 0;
				}
			}

			.bottomBor {
				display: flex;
				align-items: center;
				margin-top: 32rpx;

				.btn {
					width: 100%;
					height: 96rpx;
					background: #333333;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					line-height: 96rpx;
					text-align: center;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-right: 16rpx;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin-left: 32rpx;
				}
			}
		}
	}

	.operateBor {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: space-around;
		position: absolute;
		top: 250rpx;
		right: 32rpx;
		width: 116rpx;
		// height: 480rpx;
		padding: 16rpx 0;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.7);
		z-index: 100;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 16rpx 0;

			image {
				width: 56rpx;
				height: 56rpx;
			}

			text {
				padding-top: 12rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			::v-deep button {
				background: none;
				padding: 0;
				text-align: left;
				margin: 0;
			}

			::v-deep button::after {
				content: none;
			}
		}
	}

	.showflower {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 420rpx;
		// height: 340rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		text-align: center;

		.tis {
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			padding: 50rpx 0;
		}

		.btns {
			display: flex;
			justify-content: center;
			padding: 50rpx 0;

			.btn {
				width: 168rpx;
				height: 52rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				text-align: center;
				line-height: 52rpx;
				margin: 0 12rpx;
				font-size: 24rpx;
			}

			.active {
				background: #FF504A;
				color: #fff;
			}
		}
	}
</style>